import React, { useRef, useState } from 'react';
import { useFrame } from '@react-three/fiber';
import { Text, Sphere } from '@react-three/drei';
import type { DatingProfile } from '../types';
import * as THREE from 'three';

interface ProfileBubbleProps {
  profile: DatingProfile;
  position: [number, number, number];
  onClick: () => void;
  color?: string;
}

export const ProfileBubble: React.FC<ProfileBubbleProps> = ({
  profile,
  position,
  onClick,
  color = "#FFB6C1"
}) => {
  const bubbleRef = useRef<THREE.Mesh>(null);
  const textRef = useRef<THREE.Mesh>(null);
  const [hovered, setHovered] = useState(false);
  const [clicked, setClicked] = useState(false);

  useFrame((state) => {
    if (bubbleRef.current) {
      // Floating animation
      bubbleRef.current.position.y = position[1] + Math.sin(state.clock.elapsedTime + position[0]) * 0.2;
      
      // Hover scale effect
      const targetScale = hovered ? 1.2 : 1.0;
      const currentScale = bubbleRef.current.scale;
      currentScale.lerp(new THREE.Vector3(targetScale, targetScale, targetScale), 0.1);
      
      // Rotation animation
      bubbleRef.current.rotation.y = state.clock.elapsedTime * 0.5;
    }

    if (textRef.current) {
      // Keep text upright
      textRef.current.rotation.y = -state.clock.elapsedTime * 0.5;
      textRef.current.position.y = position[1] + Math.sin(state.clock.elapsedTime + position[0]) * 0.2;
    }
  });

  const handleClick = (e?: React.MouseEvent) => {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
    setClicked(true);
    setTimeout(() => setClicked(false), 200);
    console.log('Profile bubble clicked:', profile.name); // Debug log
    onClick();
  };

  return (
    <group position={position}>
      {/* Outer Glow */}
      <Sphere
        ref={bubbleRef}
        args={[0.8]}
        onClick={handleClick}
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
      >
        <meshLambertMaterial 
          color={color} 
          transparent 
          opacity={0.3}
          emissive={hovered ? color : '#000000'}
          emissiveIntensity={hovered ? 0.2 : 0}
        />
      </Sphere>

      {/* Inner Bubble */}
      <Sphere
        args={[0.6]}
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
      >
        <meshLambertMaterial 
          color={color} 
          transparent 
          opacity={0.8}
          emissive={clicked ? '#ffffff' : '#000000'}
          emissiveIntensity={clicked ? 0.5 : 0}
        />
      </Sphere>

      {/* Avatar Text */}
      <Text
        ref={textRef}
        position={[0, 0.1, 0]}
        fontSize={0.8}
        anchorX="center"
        anchorY="middle"
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
      >
        {profile.avatar}
      </Text>

      {/* Name Label */}
      <Text
        position={[0, -1.2, 0]}
        fontSize={0.3}
        color="#333"
        anchorX="center"
        anchorY="middle"
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
      >
        {profile.name}
      </Text>

      {/* Age and Location */}
      <Text
        position={[0, -1.6, 0]}
        fontSize={0.2}
        color="#666"
        anchorX="center"
        anchorY="middle"
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
      >
        {profile.age}岁 • {profile.location}
      </Text>

      {/* Sparkle Effect when Hovered */}
      {hovered && (
        <>
          {Array.from({ length: 6 }, (_, i) => (
            <Text
              key={i}
              position={[
                Math.cos((i * Math.PI * 2) / 6) * 1.2,
                Math.sin((i * Math.PI * 2) / 6) * 1.2,
                0
              ]}
              fontSize={0.2}
              color="#FFD700"
              anchorX="center"
              anchorY="middle"
            >
              ✨
            </Text>
          ))}
        </>
      )}
    </group>
  );
};